'use client';

import { useQuery } from '@tanstack/react-query';
import { queryTagGroup } from '@/services/api';
import type { ITagGroup } from '@/interfaces';
import Alert from '@/app/[locale]/alert/alert';
import AlertLoad from '@/app/[locale]/alert/load';
import { useContext, useEffect, useRef, useState } from 'react';
import { TagGroupAdminContext } from '@/contexts/admin/forum/tagGroup';
import UpdateTagGroupInfo from '@/app/[locale]/admin/forum/tagGroup/update/info';

export default function UpdateTagGroupAdminPage(this: any) {
  const context = useContext(TagGroupAdminContext);
  const updateModalRef = useRef<HTMLDivElement>(null);
  const [type, setType] = useState({
    info: true,
  });

  const queryTagGroupQuery = useQuery(
    ['/forum', '/tagGroups', context.updateItem?.id],
    async (context) => {
      return (await queryTagGroup({
        id: context.queryKey[2] + '',
      })) as ITagGroup;
    },
  );

  useEffect(() => {
    onClickOpenModal();
  }, []);

  function onClickMenu(item: 'info') {
    const newType = {
      info: false,
    };

    newType[item] = true;
    setType(newType);
  }

  function onClickOpenModal() {
    getUpdateModal().show();
  }

  function onClickCloseModal() {
    if (typeof context.setUpdateItem === 'function') {
      context.setUpdateItem(undefined);
    }
    getUpdateModal().hide();
  }

  function getUpdateModal() {
    const current = updateModalRef.current;
    if (!current) {
      throw '更新元素不存在';
    }

    return window.bootstrap.Modal.getOrCreateInstance(current);
  }

  return (
    <div ref={updateModalRef} className="modal fade" data-bs-backdrop="static">
      <div className="modal-dialog modal-xl modal-dialog-scrollable">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">
              {context.updateItem
                ? `${context.updateItem.name} (${context.updateItem.id})`
                : '更新版块'}
            </h5>
            <button
              onClick={onClickCloseModal}
              type="button"
              className="btn-close"
              aria-label="Close"
            ></button>
          </div>
          <div className="modal-body">
            {queryTagGroupQuery.data && (
              <div className="row">
                <div className="col-auto">
                  <div className="list-group list-group-flush">
                    <button
                      onClick={onClickMenu.bind(this, 'info')}
                      type="button"
                      className="list-group-item list-group-item-action"
                      aria-current="true"
                    >
                      基本信息
                    </button>
                  </div>
                </div>
                <div className="col">
                  {type.info && (
                    <UpdateTagGroupInfo details={queryTagGroupQuery.data} />
                  )}
                </div>
              </div>
            )}

            {queryTagGroupQuery.isError && (
              <Alert message={queryTagGroupQuery.error} type="error" />
            )}

            {queryTagGroupQuery.isLoading && <AlertLoad />}
          </div>
        </div>
      </div>
    </div>
  );
}
